<template>
    <div>
    
    
    
        <con-title :topTitle="topTitle" />
    
    
    
    
    
    
    
        <el-card class="box-card">
    
    
    
            <span class="demonstration">月份选择： </span>
    
    
    
            <el-date-picker type="month" placeholder="选择月" v-model="query.date" @change="sreamon">
    
    
    
            </el-date-picker>
    
    
    
            <!-- 列表 -->
    
    
    
            <el-table :data="FeeRechargeList">
    
    
    
                <el-table-column type="index" label="序号"> </el-table-column>
    
    
    
                <el-table-column prop="id" label="充值id"> </el-table-column>
    
    
    
    
    
    
    
                <el-table-column label="日期">
    
    
    
                    <template slot-scope="scope">
    
        
    
                    {{ scope.row.cTime | Btime }}
</template>
        </el-table-column>

        <el-table-column prop="amount" label="充值金额"> </el-table-column>

        <el-table-column prop="desc" label="备注"> </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="goPage">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $rechargeList } from "@/api";
export default {
    components: { ConTitle },
    name: "FeeRrcharge",
    data() {
        return {
            topTitle: {
                type: "计费", //type如果有内容就会显示上一级
                text: "充值记录",
                msg: "展示——————————————————————————————————",
            },
            total: 0, //总条数
            query: {
                currPage: 1, //页码
                pageSize: 10, //当前页有多少条数据
                eui: "",
                online: "",
                agreement: "all",
                date: "",
            },
            FeeRechargeList: [],
        };
    },
    mounted() {
        this.getGechargeList();
    },
    computed: {
        dateStr() {
            var date = this.query.date
            var time1 = date && date.getFullYear();
            var time2 = date && date.getMonth()+1;
            console.log(time1,time2);
            if (time1 && time2) {
                return time1 + "-" + time2;
            } else {
                return "";
            }
        },
    },
    methods: {
        getGechargeList() {
            var queryStr = { ...this.query };
            if (queryStr != "") {
                //表示有搜索条件
              console.log(queryStr.date,this.dateStr);
              queryStr.date = this.dateStr;
              console.log(queryStr.date, this.dateStr);

            }
            $rechargeList(this.query).then((res) => {
                console.log(res);
                this.FeeRechargeList = res.data.data;
                this.total = res.data.total;
            });
        },
        //当页面上显示的数据条数发生变化时会触发这个函数
        handleSizeChange(count) {
            console.log("页面的条数发生变化了", count);
            //将页面显示条数赋值给 pageSize
            this.query.pageSize = count;
            this.query.currPage = 1;
            //重新获取数据
            this.getGechargeList();
        },
        //翻页会触发的函数
        handleCurrentChange(page) {
            console.log("翻页了", page);
            // 修改当前页的页码
            this.query.currPage = page;
            //重新获取数据
            this.getGechargeList();
        },
        sreamon() {
            console.log(this.query.date);
            this.getGechargeList();
        },
    },
    filters: {
        Btime(val) {
            let d = new Date(+val);
            return (
                d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日"
            );
        },
    },
};
</script>

<style lang='scss' scoped>
.box-card {
    margin: 10px;
}

.goPage {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
</style>